<template>
  <div class="footer">
    <div class="footer-top">
      <div class="footer-left">
        <p>友情链接</p>
        <div v-for="(item1, index1) in 3" :key="index1" class="interlinkage">
          <span v-for="(item2, index2) in 3" :key="index2">
            <a href="##" v-for="(item, index) in arr" :key="index">
              {{ item }}
            </a>
          </span>
        </div>
      </div>
      <div class="footer-right">
        <ul>
          <li v-for="(item, index) in QRCode" :key="index">
            <img :src="item.img" alt="" />
            <p>{{ item.title }}</p>
          </li>
        </ul>
      </div>
    </div>
    <div class="line-between"></div>
    <div class="footer-bottom">
      <a href="##" v-for="(item, index) in footerArr" :key="index">
        {{ item }}
      </a>
      <div>
        <span>蓝莓派版权所有</span>
        <span>京ICP备12346335号</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: ["乐乎\u3000", "数字尾巴\u3000", "豆瓣\u3000", "环球旅行\u3000"],
      QRCode: [
        {
          title: "微博二维码",
          img: "http://iwenwiki.com/api/blueberrypai/image/footer-ewm1.jpg",
        },
        {
          title: "微信二维码",
          img: "http://iwenwiki.com/api/blueberrypai/image/footer-ewm2.jpg",
        },
      ],
      footerArr: [
        "关于我们\u3000",
        "联系我们\u3000",
        "加入我们\u3000",
        "团队成员\u3000",
        "商务合作\u3000",
        "版权声明\u3000",
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.footer {
  .footer-top {
    margin: 20px auto;
    width: 1120px;
    overflow: hidden;
    margin-bottom: 20px;
    text-align: left;
    .footer-left {
      float: left;
      p {
        font-size: 12px;
        margin: 10px 0;
      }
      a {
        font-size: 14px;
        color: #999;
      }
      .interlinkage {
        margin-bottom: 4px;
      }
    }
    .footer-right {
      float: right;
      margin-top: 16px;
      li {
        float: left;
        margin-left: 25px;
        img {
          width: 88px;
          height: 88px;
        }
        p {
          margin: 2px;
          font-size: 12px;
          color: #000;
          text-align: center;
        }
      }
    }
  }
  .line-between {
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, 0.2);
  }
  .footer-bottom {
    margin: 30px auto 30px;
    width: 1120px;
    a {
      color: #000;
    }
    div {
      margin-top: 10px;
      span {
        color: #999;
        font-size: 12px;
        margin-right: 30px;
      }
    }
  }
}
</style>